<template>
    <div class="start-wrapper" :class="startType">
        <span v-for="(item,i) in itemClass" :class="item" class="start-item" @key="i"></span>
    </div>
</template>

<script>
    const LENGTH = 5;
    const CLS_ON = 'on';
    const CLS_OFF = 'off';
    const CLS_HALF = 'half';
    export default {
        name: "start",
        props: ["score","size"],
        computed:{
          startType(){
            return 'start-'+this.size;
          },
          itemClass(){
            let arr = [];
            let score = Math.floor(this.score*2)/2;
            let s_on = Math.floor(score);
            let flag = score%1 != 0; //是不是有小数 true为整数
            for(let i=0;i<s_on;i++){
              arr.push(CLS_ON);
            }
            if(flag){
              arr.push(CLS_HALF);
            }
            while(LENGTH>arr.length){
              arr.push(CLS_OFF);
            }
            return arr;
          }
        }
    }
</script>

<style lang="scss" scoped>
  .start-wrapper{
    font-size: 0;
      display: inline-block;
      background-repeat: no-repeat;
    &.start-48{
      .start-item{
        width: 20px;
        height: 20px;
        margin-right: 22px;
        background-size: 20px 20px;
        display: inline-block;
        &:last-child{
          margin-right: 0;
        }
        &.on{
          @include bg-image("star48_on");
        }
        &.off{
          @include bg-image("star48_off");
        }
        &.half{
          @include bg-image("star48_half");
        }
      }
    }

    &.start-36{
      .start-item{
        width: 15px;
        height: 15px;
        margin-right: 6px;
        &:last-child{
          margin-right: 0;
        }
        background-size: 15px 15px;
        display: inline-block;
        &.on{
          @include bg-image("star36_on");
        }
        &.off{
          @include bg-image("star36_off");
        }
        &.half{
          @include bg-image("star36_half");
        }
      }
    }

    &.start-24{
      .start-item{
        width: 10px;
        height: 10px;
        margin-right: 3px;
        background-size: 10px 10px;
        display: inline-block;
        &:last-child{
          margin-right: 0;
        }
        &.on{
          @include bg-image("star24_on");
        }
        &.off{
          @include bg-image("star24_off");
        }
        &.half{
          @include bg-image("star24_half");
        }
      }
    }
  }
</style>
